<template>
  <div class="containe">
    <div class="waterfall" ref="waterfall" id="waterfall">
      <div class="image-box" v-for="(item,index) in imageList1" :key="index"
      :style="{width: item.width+'px', height: item.height+'px',top: item.top+'px', left: item.left+'px'}">
          <img :src="item.url">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      timer: null,
      baseHeight: 200, // 图片的基础计算高度
      imageList: [[]], // 用二维数据保存每一行数据
      imageList1: [],
      rowWidth: 0, // 每行的图片宽度
      rowCount: 0, // 每行的索引
      top: 0,
      left: 0,
      clientWidth: '',
      imgList: [
        { url: require('../assets/1.jpg') },
        { url: require('../assets/2.jpg') },
        { url: require('../assets/3.jpg') },
        { url: require('../assets/4.jpg') },
        { url: require('../assets/5.jpg') },
        { url: require('../assets/6.jpg') },
        { url: require('../assets/7.jpg') },
        { url: require('../assets/8.jpg') },
        { url: require('../assets/9.jpg') },
        { url: require('../assets/10.jpg') },
        { url: require('../assets/11.jpg') },
        { url: require('../assets/12.jpg') },
        { url: require('../assets/13.jpg') },
        { url: require('../assets/14.jpg') },
        { url: require('../assets/15.jpg') },
        { url: require('../assets/16.jpg') },
        { url: require('../assets/17.jpg') },
      ],
    };
  },
  watch: {
    '$refs.waterfall.clientWidth': function (val) {
      console.log(val);
    },
  },
  mounted() {
    window.addEventListener('resize', this.resizeHandler);
    this.$nextTick(() => {
      this.clientWidth = document.getElementById('waterfall').clientWidth;
      this.loadImage();
    });
  },
  methods: {
    resizeHandler() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        const { clientWidth } = document.getElementById('waterfall');
        if (this.clientWidth !== clientWidth) {
          this.clientWidth = clientWidth;
          this.loadImage();
          this.top = 0;
          this.left = 0;
          this.rowCount = 0;
          this.rowWidth = 0;
          this.imageList1 = [];
          this.imageList = [[]];
        }
        this.timmer = null;
      }, 200);
    },
    loadImage() {
      this.left = 0;
      this.top = 0;
      for (let i = 0; i < 17; i++) {
        const image = new Image();
        const url = require(`../assets/${i}.jpg`);
        image.src = url;
        image.onload = () => {
          this.compare({
            url,
            width: this.baseHeight * (image.width / image.height),
            height: this.baseHeight,
          });
        };
      }
    },
    compare(image) {
      const { clientWidth } = this;
      // 计算每行的宽度
      this.rowWidth += image.width;
      // 如果宽度大于容器宽度，去掉多余的宽度，整体进行缩放适应容器让右边对齐
      if (this.rowWidth > clientWidth) {
        this.rowWidth = this.rowWidth - image.width;
        // 把高度调整为放大后的
        const changeBaseHeight = this.baseHeight * (clientWidth / this.rowWidth);
        this.imageList[this.rowCount].forEach((item, index) => {
          if (index === 0) this.left = 0;
          item.height = changeBaseHeight;
          item.width = (item.width / this.rowWidth) * clientWidth;
          item.top = this.top;
          item.left = this.left;
          this.left += item.width;
        });
        this.top += changeBaseHeight;
        // 以防最后一行top没有计算
        image.top = this.top;
        this.left = image.width;
        // 把多余的图片放入到下一行
        this.rowCount++;
        this.rowWidth = image.width;
        this.$set(this.imageList, this.rowCount, [image]);
        this.imageList1.push(image);
      } else {
        image.top = this.top;
        image.left = this.left;
        this.left += image.width;
        this.imageList[this.rowCount].push(image);
        this.imageList1.push(image);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.waterfall {
  position: relative;
  width: 80%;
  font-size: 0;
  .image-box {
    position: absolute;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .image-item {
    display: inline-block;
  }
}
</style>
